import React from "react"
import houtui from "./img/后退.png"
import gedansousuo from "./img/歌单搜索.png"
import bofang from "./img/播放.png"
import shoucang from "./img/收 藏.png"
import pinglun from "./img/评论.png"
import share from "./img/分享.png"
import xiazai from "./img/下载管理.png"
import duoxuan from "./img/多选 选中.png"
import Mycss from "./style/common.module.css"
// import "../../assets/style/index.css"
// import Song from "./song"
// import {Route} from "react-router-dom"
import { NoticeBar, WhiteSpace, Icon } from 'antd-mobile';

// import { Popover, NavBar, Icon } from 'antd-mobile';
// const Item = Popover.Item;

// const myImg = src => <img src={`https://gw.alipayobjects.com/zos/rmsportal/${src}.svg`} className="am-icon am-icon-xs" alt="" />;
class Playlist extends React.Component{
    constructor(){
        super()
        this.state={
            artist:{},
            hotSongs:[]
        }
    }
    componentWillMount(){
      let search=this.props.location.search.replace(/\?/,'')
      console.log(search)
        // fetch('http://106.12.79.128:666/artists?id=21132',{
        fetch(`http://106.12.79.128:666/artists?id=${search}`,{
          credentials:'include'
        })
        .then(body=>body.json())
        .then(res=>{
          console.log(res.artist)
            this.setState({
              artist:res.artist,
              hotSongs:res.hotSongs 
            })
        })
    }
    back(){
      // const id=this.props.location.id
      // const uid=this.props.location.userid
      this.props.history.push("/Search")
      // this.props.history.push({pathname:"/gen/My",id})
    }
render(){
    return(
      //通知栏滚动
      <div>
            <div className={Mycss.shangmian}>
              <div className={Mycss.topest}>
                <img src={houtui} alt="" className={Mycss.backicon} onClick={this.back.bind(this)}/>
                <img src={gedansousuo} alt="" className={Mycss.gedansousuo}/>
              </div>
              <img src={this.state.artist.picUrl} alt="" className={Mycss.singerImg}/>
            </div>

            <div className={Mycss.xiamian}>
              
              <div className={Mycss.xiamianhead}><img src={bofang} alt="" className={Mycss.bofangicon}/>
                <div className={Mycss.bofangquanbu}>播放全部<div className={Mycss.yigong}>(共{this.state.hotSongs.length}首)</div></div>
                <div className={Mycss.shoucangliang}><img src={shoucang} alt="" className={Mycss.shoucangicon}/>
                <div className={Mycss.shoucangshu}>{this.state.shoucangliang}</div></div>
              </div>

              <ul className={Mycss.playlists}>
              {this.state.hotSongs.map((item,index)=>
                <li key={index} className={Mycss.gequs}>
                  <div className={Mycss.xuhao}>{index+1}</div>
                  <div className={Mycss.gequmingzi}>{item.name}
                    <span className={Mycss.gequxinxi}>{item.alia.length===0?"":(`(${item.alia[0]})`)}</span>
                    <div className={Mycss.fuxinxi}><div className={Mycss.sq}>SQ</div>
                      <div className={Mycss.fuxinxi2}>
                        <div className={Mycss.singer}>{item.ar.length===1?`${item.ar[0].name} -`:`${item.ar[0].name}/${item.ar[1].name} -`} {item.al.name}</div>
                      </div>
                    </div>
                  </div>
                </li>)}
              </ul>

            </div>
    </div>
    )
}
}
export default Playlist